.container {
    height: calc(100% - 60px); /* 使容器占满视口高度，减去底部按钮的高度 */
    width: 100%; /* 使容器占满整个视口宽度 */
    padding: 20px;
    display: flex;
    flex-direction: column;
    position: relative; /* 为绝对定位的按钮提供定位上下文 */
    background: linear-gradient(135deg, #e0f7fa, #e0ffe5); /* 渐变从淡青色到淡绿色 */
}

.header {
    display: flex;
    flex-direction: column; /* 垂直排列 */
    align-items: flex-start; /* 左对齐 */
}

.menu {
    display: flex;
    justify-content: space-around; /* 水平分布菜单项 */
    cursor: pointer; /* 添加手形光标 */
}

.menuItem {
    padding: 10px 15px; /* 添加内边距 */
    position: relative; /* 使伪元素相对于菜单项定位 */
}

.menuItem:hover {
    color: #007bff; /* 悬停时的颜色变化 */
}

.menuItem.active::after {
    content: '';
    position: absolute;
    left: 50%; /* 水平居中 */
    bottom: -5px; /* 距离文本底部的位置 */
    width: 100%; /* 与菜单项宽度一致 */
    height: 2px; /* 下划线的高度 */
    background-color: #007bff; /* 下划线颜色 */
    transform: translateX(-50%); /* 根据宽度进行水平居中 */
}

.userInfoContainer {
    background: linear-gradient(135deg,  #50ee90, #00fff0);
    border-radius: 10px; /* 圆角效果 */
    display: flex; /* 使用flex布局 */
    padding: 5px; /* 内边距 */
    gap: 20px; /* 元素之间的间距 */
    align-items: center; /* 垂直居中 */
    margin-bottom: 5px; /* 底部间距 */
}

.avatar {
    width: 60px; /* 头像宽度 */
    height: 60px; /* 头像高度 */
    border-radius: 50%; /* 圆形头像 */
    object-fit: cover; /* 适应封装 */
}

.currentUser {
    display: flex; /* 使用flex布局 */
    align-items: flex-end; /* 垂直对齐底部 */
    gap: 40px; /* 设定用户名和ID之间的间距 */
}

.userDetails {
    flex-grow: 1; /* 用户信息部分自适应扩展 */
    display: flex; /* 使用flex布局 */
    flex-direction: column; /* 竖直方向排列 */
}

.username {
    font-size: 20px; /* 用户名字体大小 */
    font-weight: bold; /* 加粗 */
}

.level {
    font-size: 14px; /* 字体大小 */
    color: #999; /* 级别显示为灰色 */
    margin-left: 15px; /* 左边距 */
}

.userId {
    font-size: 14px; /* ID字体大小 */
    font-style: italic; /* 斜体效果 */
}

.userRole {
    font-size: 16px; /* 角色字体大小 */
    margin-bottom: 20px; /* 顶部间距 */
}

.userPoints {
    font-size: 16px; /* 积分字体大小 */
    margin-left: 200px; /* 顶部间距 */
    margin-right: 250px; /* 底部间距 */
}

/* 按钮容器样式 */
.buttonContainer1 {
    margin-top: 3px; /* 顶部间距 */
    display: flex; /* 水平排列按钮 */
    justify-content: flex-start; /* 左对齐 */
    gap: 10px; /* 按钮之间的间距 */
}

.buttonDiv {
    display: flex;
}

.button {
    width: 120px; /* 定义按钮宽度为150px，可根据需要修改 */
}

.errorMessageContainer {
    height:25px;
    display: flex;
    justify-content: center;
}

.errorMessage {
    color: red; /* 错误信息为红色 */
    text-align: center; /* 居中对齐 */

}


.userList {
    height: 400px; /* 固定高度 */
    overflow-y: auto;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
    background-color: #f0f8ff; /* 淡蓝色背景，使用 AliceBlue 作为示例 */
    margin-top: 10px;
}


.userItem {
    display: flex;
    justify-content: space-between; /* 保证信息和按钮在同一行 */
    align-items: center; /* 垂直居中 */
    margin: 5px 0;
    border: 1px solid #ddd; /* 边框颜色 */
    border-radius: 5px; /* 圆角边框 */
    padding: 10px; /* 内边距 */
    background-color: #f9f9f9; /* 背景色 */
    transition: background-color 0.3s; /* 悬停效果 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

.userItem:hover {
    background-color: #f1f1f1; /* 悬停时的背景色 */
}

.userInfoText span {
    flex: 1; /* 每个span占据相同的空间 */
    min-width: 100px; /* 设置最小宽度，以防止文本溢出 */
    text-align: left; /* 左对齐文本 */
}

.userInfoText {
    display: flex;
    justify-content: space-between; /* 保证信息和按钮在同一行 */
    align-items: center; /* 垂直居中 */
    gap: 20px; /* 设定间隔，避免文本相互拥挤 */
    width: 100%; /* 使其占满父容器的宽度 */
    font-size: 16px; /* 字体大小 */
    line-height: 1.6; /* 行高 */
}

.label {
    color: blue; /* 设置说明文本颜色为蓝色 */
    font-weight: bold; /* 加粗文本以提高可读性 */
}

.buttonContainer2 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding:0;
    gap: 20px;
}

.smallButton {
    width: 100px; /* 定义按钮宽度 */
    height: 30px; /* 定义按钮高度 */
    font-size: 14px; /* 设置字体大小 */
    background-color: #4CAF50; /* 设置按钮背景颜色 */
    color: white; /* 设置字体颜色 */
    border: none; /* 去掉默认边框 */
    border-radius: 25px; /* 设置圆角 */
    padding: 0; /* 去掉内边距，使用flexbox来居中 */
    display: flex; /* 使用flexbox布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    cursor: pointer; /* 鼠标悬停时显示为手型 */
    transition: background-color 0.3s ease, transform 0.2s ease; /* 添加过渡效果 */
}

/* 悬停效果 */
.smallButton:hover {
    background-color: #45a049; /* 悬停时的背景颜色 */
    transform: scale(1.05); /* 悬停时稍微放大 */
}

/* 点击效果 */
.smallButton:active {
    transform: scale(0.95); /* 点击时稍微缩小 */
}

.returnButton {
    position: absolute; /* 固定在底部 */
    bottom: 20px; /* 距离底部20px */
    left: 50%; /* 左边距50% */
    transform: translateX(-50%); /* 水平居中对齐 */
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.modalContent {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.roleOptions {
    margin: 20px 0;
}

.roleOption {
    margin: 10px 0;
}
